{% extends "base/nav.html" %}
{% load static %}

{% block title %}搜索 "{{ query }}" - 设计作品平台{% endblock %}

{% block css %}
<style>
.search-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-radius: 0 0 20px 20px;
}

.search-box {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.search-result-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.search-result-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
}

.search-result-card .card-body {
    padding: 1.5rem;
}

.article-title {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
}

.article-title:hover {
    color: #667eea;
    text-decoration: none;
}

.article-excerpt {
    color: #666;
    line-height: 1.6;
    margin: 1rem 0;
}

.article-meta {
    font-size: 0.85em;
    color: #6c757d;
}

.category-badge {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    border: none;
}

.no-results {
    text-align: center;
    padding: 3rem;
}

.no-results-icon {
    font-size: 4rem;
    color: #6c757d;
    margin-bottom: 1rem;
}
</style>
{% endblock %}

{% block content %}
<!-- 搜索头部 -->
<div class="search-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-5 mb-3">
                    <i class="fas fa-search"></i> 搜索作品
                </h1>
                {% if query %}
                <p class="lead">关键词: "{{ query }}"</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="container">
    <!-- 搜索框 -->
    <div class="search-box">
        <form action="{% url 'main:search' %}" method="get">
            <div class="input-group input-group-lg">
                <input type="text"
                       name="q"
                       class="form-control"
                       placeholder="搜索作品标题、内容或分类..."
                       value="{{ query }}"
                       required>
                <div class="input-group-append">
                    <button class="btn btn-primary" type="submit">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 搜索结果 -->
    {% if query %}
        {% if articles %}
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i>
                找到 <strong>{{ paginator.count }}</strong> 个相关作品
            </div>

            <!-- 搜索结果列表 -->
            <div class="row">
                {% for article in articles %}
                <div class="col-lg-6 mb-4">
                    <div class="card search-result-card">
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="{% url 'main:article_detail' article.pk %}" class="article-title">
                                    {{ article.title }}
                                </a>
                                {% if article.capa %}
                                <span class="badge category-badge float-right">{{ article.capa.title }}</span>
                                {% endif %}
                            </h5>

                            <p class="article-excerpt">
                                {{ article.content|striptags|truncatechars:150 }}
                            </p>

                            <div class="article-meta d-flex justify-content-between">
                                <span>
                                    <i class="fas fa-user"></i>
                                    {{ article.author.username|default:"未知作者" }}
                                </span>
                                <span>
                                    <i class="far fa-clock"></i>
                                    {{ article.created_at|date:"Y-m-d H:i" }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- 分页 -->
            {% if is_paginated %}
            <nav aria-label="搜索结果分页">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link"
                           href="?q={{ query }}&page={{ page_obj.previous_page_number }}">
                            <i class="fas fa-chevron-left"></i> 上一页
                        </a>
                    </li>
                    {% endif %}

                    {% for pn in paginator.page_range %}
                        {% if pn == page_obj.number %}
                        <li class="page-item active">
                            <span class="page-link">{{ pn }}</span>
                        </li>
                        {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?q={{ query }}&page={{ pn }}">{{ pn }}</a>
                        </li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link"
                           href="?q={{ query }}&page={{ page_obj.next_page_number }}">
                            下一页 <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}

        {% else %}
            <!-- 没有搜索结果 -->
            <div class="card no-results">
                <div class="card-body">
                    <div class="no-results-icon">
                        <i class="fas fa-search-minus"></i>
                    </div>
                    <h3>没有找到相关作品</h3>
                    <p class="text-muted mb-4">请尝试使用其他关键词搜索，或浏览以下建议：</p>
                    <div class="suggestions">
                        <a href="{% url 'main:my_articles_all' %}" class="btn btn-outline-primary mr-2">
                            <i class="fas fa-list"></i> 浏览所有作品
                        </a>
                        <a href="{% url 'main:index' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-home"></i> 返回首页
                        </a>
                    </div>
                </div>
            </div>
        {% endif %}
    {% else %}
        <!-- 未输入关键词 -->
        <div class="card no-results">
            <div class="card-body">
                <div class="no-results-icon">
                    <i class="fas fa-search"></i>
                </div>
                <h3>请输入搜索关键词</h3>
                <p class="text-muted mb-4">在搜索框中输入作品标题、内容或分类名称进行搜索</p>
                <div class="search-tips">
                    <h5>搜索提示：</h5>
                    <ul class="text-muted">
                        <li>尝试使用更具体的关键词</li>
                        <li>检查拼写是否正确</li>
                        <li>使用作品标题中的关键词</li>
                        <li>尝试搜索分类名称</li>
                    </ul>
                </div>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}